import React, { useState, useEffect } from 'react'
import { Row, Col, Table, Modal, Icon} from 'antd'
import { connect } from 'dva'
import checkColums from 'columns/deviceCheck'
import Paging from 'components/common/paging'
import Voice from 'components/common/voice'
import Picture from 'components/common/picture'

import './index.styl'
import './index.less'


function ObjectContent ({ dispatch, data, oneList, deviceCheck: {checkTaskList} }) {
    // 列表数据
    const [tableList, setTableList] = useState(oneList)
    const [current, setCurrent] = useState(1)
    useEffect(() => {
      if (checkTaskList.length) {
        setTableList(checkTaskList)
      } else {
        setTableList(oneList)
      }
    },[checkTaskList, oneList])
    // 展开：获取分页数据
    const getConall = () => {
        dispatch({
            type: 'deviceCheck/getByCheckTask',
            payload: {
                checkTaskId: data.id, // 点检计划任务id
                current: current,     // 当前页
                size: '5'         // 每页总条数
            }
        })
        .then(res => {
            if (res.code === '000000') {
                setTableList(res.data.records)
                setfold(!fold)
            }
        })
    }

    // 收起按钮
    const closeTable = () => {
        setTableList(oneList)
    }

    /// -------------------------------
    // 添加序号
    checkColums.details[0].render = (t, r, i) => (checkTaskList.current ? (checkTaskList.current - 1) : 0) * 10 + i + 1;

    // 执行结果
    checkColums.details[checkColums.details.length - 3].render = (t, scord) => (
        <>
        {
          scord.result
          ?
          <span>{scord.resultStr}</span>
          :
          <>
          <span>{scord.resultStr}：</span>
          <span>{scord.failReason}</span>
          </>
        }
        </>
    )


  // 获取图片名称
  const getPictureName = (name) => {
    if (name) {
      let nameArr = name.split('/')
      return nameArr[nameArr.length - 1]
    }
    return 'picture'
  }

  // 点检图片
  const [visible, setVisible] = useState(false)
  const [imgUrl, setImgUrl] = useState('')
  checkColums.details[checkColums.details.length - 2].render = (t, scord) => (
    <>
      {
        scord.images
        ?
        <>
          <Picture imgUrl={scord.images} name={getPictureName(scord.images)}/>
        </>
        :
        '—'
      }
    </>
  )
  const seeImg = (data) => {
    setVisible(true)
    if (data.images) {
      setImgUrl(data.images)
    }
  }
  const hideModal = () => {
    setVisible(false)
  }

  // 点检噪音
  const [VoiceIsible, setVoiceVisible] = useState(false)
  const [voiceUrl, setVoiceUrl] = useState('')
  checkColums.details[checkColums.details.length - 1].render = (t, scord) => (
    <>
      {
        scord.voices
        ?
        <>
          <Voice voiceUrl={scord.voices}/>
        </>
        :
        <span>—</span>
      }
    </>
  )
  const seeVoice = (data) => {
    setVoiceUrl(data)
    setVoiceVisible(true)
  }
  const hideVoiceModal = () => {
    let myAuto = document.getElementById('voiceAudio');
    myAuto.pause();
    myAuto.load();
    setVoiceVisible(false)
  }
  const [fold, setfold] = useState(true)
    // 展开
    function openTableList() {
      if (fold) {
        getConall()
      }
    }
    // 收起
    function closeTableList() {
      setfold(!fold)
      closeTable()
    }

    // 页码
    const handlePageChange = (page) => {
      setCurrent(page)
      dispatch({
        type: 'deviceCheck/getByCheckTask',
        payload: {
          checkTaskId: data.id,
          current: page,
          size: 0
        }
      })
    }

    return (
        <div className='deviceCheck_objectContent'>
            <div className='equipmentDetailsBox'>
                <div className='baseBox' style={{ marginBottom: 0 }}>
                    <div className='textBox'>
                        <div className='text-row'>
                            <div>
                                <span className='objTitle objTitle1'>项目名称：</span>
                                <span className='objConten objTitle1' >{data.name}</span>
                            </div>
                            <div>
                                <span className='objTitle'>项目周期：</span>
                                <span className='objConten'>{data.cycleTime}</span>
                            </div>
                            <div>
                                <span className='objTitle'>开始时间：</span>
                                <span className='objConten'>{data.startTime}</span>
                            </div>
                        </div>
                        <div className='text-row'>
                            <div>
                                <span className='objTitle objTitle1'>项目描述：</span>
                                <span className='objConten objTitle1'>{data.remark}</span>
                            </div>
                            <div>
                                <span className='objTitle'>是否上传图片：</span>
                                <span style={{color: data.updatePic ? '#3E6AAD' : '#B5523D'}} className='objConten'>
                                    { data.updatePic ? '是' : '否' }
                                </span>
                            </div>
                            <div>
                                <span className='objTitle'>是否上传音频：</span>
                                <span style={{color: data.updateVoice ? '#3E6AAD' : '#B5523D'}} className='objConten'>
                                    { data.updateVoice ? '是' : '否' }
                                </span>
                            </div>
                        </div>
                    </div>
                    <div className='deletedMsg' style={{ display: data.deleted === 'N' ? 'none' : 'block' }}>
                        <img src={require('assets/deleted.png')}/>
                        <span className='deletedStr'>已删除</span>
                    </div>
                </div>
                {/* <div className='foldTables'>
                  <div style={{
                    height: checkTaskList && checkTaskList.pages === 1 || checkTaskList && checkTaskList.pages === 0 || data.caseNumber < 10 || fold ? '100px' : 'auto',
                    overflow: 'hidden'
                  }}>
                    <Table
                      columns={checkColums.details}
                      dataSource={tableList}
                      pagination={false}
                      className="self-table"
                      bordered={true}
                      rowKey={ (data) => data && data.id}
                    />
                    <Paging
                      total={checkTaskList && checkTaskList.total}
                      pageSize={5}
                      handlePageChange={handlePageChange}
                      pages={checkTaskList && checkTaskList.pages}
                      pageCount={1}
                    />
                  </div>
                    
                    <div style={{ display: data.caseNumber === 0 || data.caseNumber === 1 ? 'none' : 'block'}}>
                      {
                        <div
                          className="foldTable-footer"
                          style={{
                            display: checkTaskList && checkTaskList.pages === 1 || checkTaskList && checkTaskList.pages === 0 || data.caseNumber < 10 || fold ? 'none' : 'block'
                          }}>
                        </div>
                      }
                    </div>
                    <div className="foldTable-fold">
                        {
                        fold ?
                            (
                            <div onClick={() => openTableList()} style={{ cursor: 'pointer' }}>
                                <Icon type="double-right" rotate={90} />
                                <span>展开</span>
                            </div>
                            )
                            :
                            (
                            <div onClick={closeTableList} style={{ cursor: 'pointer' }}>
                                <Icon type="double-right" rotate={-90} />
                                <span>收起</span>
                            </div>
                            )
                        }
                    </div>
                    <div className='modalebox'>
                      <Modal
                        width='5rem'
                        title="查看点检图片"
                        visible={visible}
                        onOk={hideModal}
                        onCancel={hideModal}
                        okText="确认"
                        cancelText="取消"
                        centered
                      >
                      <div className='imgbox' style={{ width: '100%', height: '100%'}}>
                        <img src={imgUrl} style={{width: '100%', height: '4rem',}}/>
                      </div>
                      </Modal>
                    </div>
                    <div className='modalebox'>
                      <Modal
                        width='4rem'
                        title="噪音播放"
                        visible={VoiceIsible}
                        onOk={hideVoiceModal}
                        onCancel={hideVoiceModal}
                        okText="确认"
                        cancelText="取消"
                        centered
                        bodyStyle={{ textAlign: 'center'}}
                      >
                      <audio
                        id="voiceAudio"
                        src={voiceUrl}
                        controls="controls"
                        preload="preload"
                      />
                      </Modal>
                    </div>
                </div> */}
            </div>
        </div>
    )
}
export default connect(({ deviceCheck }) => ({
  deviceCheck
}))(ObjectContent)
